<template>
	<view>
		<checkbox-group v-model="checkboxValue" @change="checkboxChange">
			<view class="card" v-for="(item,index) in tableData" :key="index">
				<view class="card_body" style="margin: 5px 0;">
					<view style="padding:20px 0px 20px 10px;display: flex;">
						<view v-if="!isShowBatchBtn">
							<checkbox :value="JSON.stringify(item)" :checked="item.checked" />
						</view>
						<view style="display:inline-block;font-weight: bold;">{{item.name}}</view>
					</view>
					<view class="card_middle card" style="margin: 20 20px;background-color: #f5f5f5;">
						<view class="item_content">
							<view style="font-weight: bold;">营业信息</view>
							<view @click="goEdit(item,1)"><span style="font-weight: bold;">编辑</span><uni-icons
									type="forward" size="20"></uni-icons></view>
						</view>
						<view class="item_content">
							<view class="item_content_left">营业状态</view>
							<view class="item_content_right">
								<view v-if="item.businessStatus == '0'">已歇业</view>
								<view v-else-if="item.businessStatus == '1'">
									营业中
								</view>
							</view>
						</view>
						<view class="item_content">
							<view class="item_content_left">营业日</view>
							<view class="item_content_right">{{ getDayOfWeek(item.monday)}}</view>
						</view>
						<view class="item_content">
							<view class="item_content_left">营业时段</view>
							<view class="item_content_right">
								{{item.businessBeginHoursEveryDay}}-{{item.businessEndHoursEveryDay}}
							</view>
						</view>
					</view>
					<view class="card" style="padding: 10px;background-color: #f6f6f6;">
						<view class="item_content" style="margin-bottom: 0px;">
							<view style="line-height: 40rpx;">自动歇业配置</view>
							<view>
								<view v-if="item.automaticallyDate == null || item.automaticallyDate == '[]'"
									@click="goEdit(item,2)"><span style="font-weight: bold;">未配置</span><uni-icons
										type="forward" size="20"></uni-icons></view>
								<view v-else-if="item.automaticallyDate != null" @click="goEdit(item,2)">
									<span style="font-weight: bold;">已配置</span><uni-icons type="forward"
										size="20"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</checkbox-group>


		<u-empty v-if="tableData.length == 0 " style="background-color: #fff;height: 100%;" mode="data"
			icon="/static/empty/data.png"></u-empty>

		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>

		<view style="height: 60px;"></view>
	</view>

</template>

<script>
	import {
		businessQueryBusinessStatusApi,
	} from '@/api/businessStatus.js'
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		props: {
			tab: {
				type: [Object],
				default: ''
			},
			radiovalue1: {
				type: String,
				default: ''
			},
			isShowBatchBtn: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				// tableData: {
				// 	data: []
				// },
				tableData: [],
				cancellForm: {
					limit: 10,
					page: 1,
				},
				idsData: null,
				loadMoreStatus: 'noMore',
				dayMap: {
					'1': '周一',
					'2': '周二',
					'3': '周三',
					'4': '周四',
					'5': '周五',
					'6': '周六',
					'7': '周日'
				},
				checkboxValue: [], // 选择的经营城市
			}
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		created() {
			this.initData();
		},
		watch: {
			checkboxValue(newVal, oldVal) {
				if (this.tableData.length == this.checkboxValue.length) {
					this.$emit('isAllChecked', true);
				} else {
					this.$emit('isAllChecked', false);
				}
			},
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.cancellForm.page = 1;
				this.loadMoreStatus = 'more';
				// //需要初始化列表数据，根据数据类型
				this.cancellForm.cityId = this.tab.useId;
				if (this.tab.useId == '0') {
					delete this.cancellForm.cityId
				}
				this.getCouponList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.cancellForm.page++;
				this.getCouponList(true);
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}
				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
			goEdit(item, ele) {
				item.type = ele;
				this.goPage('/pages/businessInformation/editInformation/editInformation?data=' + JSON.stringify(item));
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},

			getDayOfWeek(dayString) {
				// 创建一个对象来映射数字和对应的星期几
				const dayMap = this.dayMap;

				if (dayString != null && dayString != undefined) {
					// 将字符串中的数字提取为数组
					const numbers = dayString.match(/\d+/g);
					// 如果字符串中包含的数字不是 1 到 7，则返回 true
					if (numbers.length == 7) {
						var isTrue = true;
					}
					// 映射数字为星期
					let stringMonday = numbers.map(num => dayMap[num]).join(' , ');
					return isTrue ? '每日' : stringMonday;
				}


			},

			// ----------------------
			getCouponList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.cancellForm.page = 1;
					this.loadMoreStatus = 'more';
				};
				businessQueryBusinessStatusApi(this.cancellForm).then((res) => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data, that.tableData);
					} else {
						that.tableData = data;
					}
					that.totalPage = data.totalPage;
					if (data.totalPage == this.cancellForm.page) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();

					// this.tableData = res.data;
					// this.idsData = res.data.map(obj => obj.id); //id的集合
					this.idsData = data.map(obj => obj.id); //id的集合
					const isSameName = data.every(obj => obj.businessStatus == '0');
					if (isSameName) {
						let radiovalue1 = '临时歇业'
						this.$emit('update:radiovalue1', radiovalue1)
					} else {
						let radiovalue1 = '正常营业'
						this.$emit('update:radiovalue1', radiovalue1)
					} //整体营业状态判断
					//处理时间
					this.tableData = data.map(function(item) {
						var beginHours = Math.floor(item.businessBeginHoursEveryDay / 60);
						var beginMinutes = item.businessBeginHoursEveryDay % 60;
						if (beginHours < 10) {
							beginHours = "0" + beginHours;
						};
						if (beginMinutes < 10) {
							beginMinutes = "0" + beginMinutes;
						};
						var endHours = Math.floor(item.businessEndHoursEveryDay / 60);
						var endMinutes = item.businessEndHoursEveryDay % 60;
						if (endHours < 10) {
							endHours = "0" + endHours;
						};
						if (endMinutes < 10) {
							endMinutes = "0" + endMinutes;
						};
						return {
							...item,
							businessBeginHoursEveryDay: beginHours + ":" + beginMinutes,
							businessEndHoursEveryDay: endHours + ":" + endMinutes,
						};
					});
				})
			},

			//-----------------------------
			/** 
			 *复选框事件
			 */
			checkboxChange(ele) {
				if (ele && ele.detail && ele.detail.value && ele.detail.value.length) {
					let checkboxValue1 = [];
					for (var i = 0; i < ele.detail.value.length; i++) {
						checkboxValue1.push(ele.detail.value[i])
					}
					this.$set(this, 'checkboxValue', checkboxValue1)
					this.$emit('checkboxChange', checkboxValue1);
				} else {
					this.$emit('checkboxChange', ele);
				}
			},
			// -- 父组件调用，全选或清除所有选项
			checkboxAllSelect(isClean) {
				let that = this;
				if (isClean) {
					this.checkboxValue = [];
					for (let item of that.tableData) {
						item.checked = false;
					};
				} else {
					for (let text of this.tableData) {
						this.checkboxValue.push(JSON.stringify(text));
					}
					for (let item of that.tableData) {
						item.checked = true;
					}
				}
				this.checkboxChange(this.checkboxValue); //返给上级页面信息
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.title {
		font-size: 16px;
		margin: 20rpx 0;
	}

	.item_top {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		font-weight: bold;
		font-size: 16px;
	}

	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.item_content_left {
			flex: 1;
		}

		.item_content_right {
			flex: 2;
		}
	}

	.card_body {
		background-color: #fff;
		padding: 10rpx;
	}

	.card_middle {
		// background-color: #f5f5f5;
		padding: 10px;
	}

	.u-demo-block {
		height: 25vh;
		padding: 20px;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}
</style>